<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手写jQuery</title>
    <style>.active{color:red}</style>
<body>
    <h1>我是H1</h1>
    <div>abc</div>
    <div class="num">123</div>
    <h2 class="num">我爱jq</h2>
    <script>
    //  $("div").hide();
    //  使用jQuery时候没有用new ？jquery是如果实现无 new化操作的
    //  我们用函数类的方式去写
    (function(){
        var jQuery =  function(selector){
            return new jQuery.prototype.init(selector);
        }
        jQuery.prototype.init=function(selector){
            // jquery初始化操作
            // 获取dom元素
            var domList = document.querySelectorAll(selector);
            for(var i=0;i<domList.length;i++){
                this[i] = domList[i];
            }
            this.length = domList.length;
            return this;
        }
        jQuery.prototype.init.prototype = jQuery.prototype;
        // 保证jQuery this 指向正确

        // 把jQuery暴露在全局中
        window.jQuery = jQuery;
        window.$ = jQuery;
        jQuery.prototype.each=function(fn){
            for(let i=0;i<this.length;i++){
                fn(this[i]);
            }
            return this;
        }        
        // each 方法 执行回调函数fn 把每个jquery选择到的元素都传入执行一次
        jQuery.prototype.show = function(){
            this.each(elem=>elem.style.display="block")
            return this;//保证jquery实现链式操作
        }
        jQuery.prototype.hide = function(){
            this.each(elem=>elem.style.display="none")
            return this;//保证jquery实现链式操作
        }
        // jquery 事件
        jQuery.prototype.on=function(type,fn){
            return this.each(elem=>{
                elem.addEventListener(type,fn,false);
            })
        }
        jQuery.prototype.toggleClass = function(className){
            this.each(elem=>elem.classList.toggle(className));
            // classList 是h5新加的操作class方法
            // add 添加  remove 删除   toggle 切换 clear 清除
            return this;
            // this不是值某个dom对象 而是new jQuery.init();返回的对象 
        }

    }())
    // 用匿名函数自执行（闭包）避免了 变量全局污染
    $("h1").on("click",function(){
        // $("div").hide();
        $(".num").toggleClass("active").hide();
    })

  

    </script>

</body>
</html>